<template>
  <div>
    <!----------------------- 栅格 ----------------------->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="always">
          <div class="el_card">
            <div class="top">
              <span>销售额</span>
              <span class="day">今日</span>
            </div>
            <div class="content">0.00</div>
            <div class="content line">
              <hr>
            </div>
            <div class="bottom">
              <p>昨日数据</p>
              <span>0.00元</span>
            </div>
          </div>
        </el-card>

      </el-col>
      <el-col :span="6">
        <el-card shadow="always">
          <div class="el_card">
            <div class="top">
              <span>用户访问量</span>
              <span class="day">今日</span>
            </div>
            <div class="content">23416</div>
            <div class="content line">
              <hr>
            </div>
            <div class="bottom">
              <p>昨日数据</p>
              <span>20405</span>
            </div>
          </div>
        </el-card>

      </el-col>
      <el-col :span="6">
        <el-card shadow="always">
          <div class="el_card">
            <div class="top">
              <span>订单量</span>
              <span class="day">今日</span>
            </div>
            <div class="content">0</div>
            <div class="content line">
              <hr>
            </div>
            <div class="bottom">
              <p>昨日数据</p>
              <span>0单</span>
            </div>
          </div>
        </el-card>

      </el-col>
      <el-col :span="6">
        <el-card shadow="always">
          <div class="el_card">
            <div class="top">
              <span>新增用户</span>
              <span class="day">今日</span>
            </div>
            <div class="content">8</div>
            <div class="content line">
              <hr>
            </div>
            <div class="bottom">
              <p>昨日数据</p>
              <span>10人</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!----------------------- 仪表盘 ---------------------->
    <!-- <h2>仪表盘12345</h2> -->
    <button @click="lengChange1">切换第一个系列</button>
    <button @click="lengChange2">切换第二个系列</button>
    <div ref="map1" id="map1"></div>
    <div ref="chart1" id="chart1"></div>
    <div ref="chart2" id="chart2"></div>
    <div ref="map3g" id="map3"></div>
    <!-- 百度地图组件 -->
    <baidu-map class="map5" :center="{ lng: 117.293742, lat:31.856051 }" :zoom="15" :scroll-wheel-zoom="true">
  </baidu-map>
  </div>
</template>

<script>
// 接仪表盘
import * as echarts from 'echarts'
import { mapdata } from '@/assets/mapdata/mapdata'
export default {
  name: 'DashBoard',

  data () {
    return {
      chart1: null,
      chart2: null,
      map1: null,
      map: null, // this.map 的 map
      option3: {
        type: 'map',
        map: 'map1'
      }
    }
  },
  methods: {
    lengChange1 () {
      console.log(111)
      console.log(this.chart1)
      this.chart1.dispatchAction({
        type: 'legendSelect',
        // 图例名称
        name: '销量'
      })
    },
    lengChange2 () {
      console.log(222)
      this.chart1.dispatchAction({
        type: 'legendSelect',
        // 图例名称
        name: '销售额'
      })
    },
    resizeChart () {
      window.addEventListener('resize', () => {
        this.chart1.resize()
      })
    },
    initChart1 () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(this.$refs.chart1)
      this.chart1 = myChart
      // 指定图表的配置项和数据
      const option = {
        title: {
          // text: '{a|a标签内容}',
          // textStyle: {
          //   color: 'red',
          //   rich: {
          //     a: {
          //       width: 200,
          //       height: 200,
          //       backgroundColor: {
          //         image: 'https://img1.baidu.com/it/u=3430919243,3634445490&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
          //       }
          //     }
          //   }
          // }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          formatter: '{a0}-{b0}:{c0} 件 <br/> {a1}-{b1}:{c1} 元'
          // formatter: '{a}- <br/>{b}:{c} 元'
          // valueFormatter: value => value + '件'
        },
        toolbox: {
          feature: {
            saveAsImage: {},
            restore: {},
            dataView: {},
            dataZoom: {},
            magicType: {}
          }
        },
        legend: {
          data: [
            {
              name: '销量',
              icon: 'image://https://img2.baidu.com/it/u=853774077,3219552374&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889'
            },
            {
              name: '销售额'
            }
          ]
        },
        xAxis: {
          name: '{a|x轴}',
          nameTextStyle: {
            rich: {
              a: {
                color: 'red'
              }
            }
          },
          axisLabel: {
            rotate: 45,
            formatter: '{value}商品'
          },
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {

        },
        color: ['#dcac34', '#34e567'],
        backgroundColor: '#dedce3',
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          },
          {
            name: '销售额',
            type: 'line',
            smooth: true,
            data: [12, 4, 23, 56, 45, 9]
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)

      this.chart1.on('click', e => {
        console.log(e)
      })
    },
    initChart2 () {
      // 初始化图表
      const chart2 = echarts.init(this.$refs.chart2)// ref="chart2" id="chart2"></div>获取这里面的dom
      // 绘制图表
      // chart1
      chart2.setOption({
        title: {
          text: '{a|a标签内容}',
          textStyle:
          {
            color: 'red',
            rich: {
              a: {
                width: 20,
                height: 20,
                backgroundColor: {
                  image: 'https://img2.baidu.com/it/u=3526493359,469690168&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500'
                }
              }
            }
          }
        },
        tooltip: {},
        series: [
          {
            name: '折线销量',
            type: 'pie',
            data: [{
              value: 1048,
              name: 'Search Engine'
            },
            {
              value: 735,
              name: 'Direct'
            },
            {
              value: 580,
              name: 'Email'
            },
            {
              value: 484,
              name: 'Union Ads'
            },
            {
              value: 300,
              name: 'Video Ads'
            }],
            color: ['green', 'skyblue']
          }
        ],
        color: ['E53E31', '#E53E81']
      })
      this.chart2 = chart2
    },
    /*  initmap1 () {
      const map1 = echarts.init(this.$refs.map1)
      console.log(11)
      echarts.registerMap('map1', mapdata)
      const option = {
        // 3.在 echarts 中展示中国地图
        geo: {
          type: 'map', // 系列图是 地图
          map: 'map1' // 展示中国地图( 因为只注册一个中国地图 )
        }

      }
      map1.setOption(option)
      this.map1 = map1
    } */

    initmap3 () {
      // 高德地图
      const map = new AMap.Map('map3', {
        zoom: 11, // 级别
        center: [117.286929, 31.850338], // 中心点坐标
        viewMode: '3D'// 使用3D视图
      })
      console.log(map, 'map3')
      this.map = map // this.map 的 map

      AMap.plugin('AMap.Weather', function () {
        // 创建天气查询实例
        const weather = new AMap.Weather()

        // 执行实时天气信息查询
        weather.getLive('合肥市', function (err, data) {
          console.log(err, data)
        })
      })
    }

  },

  mounted () {
    this.initChart1()
    this.initChart2()
    this.resizeChart()
    /* const map1 = echarts.init(this.$refs.map1)
    echarts.registerMap('map1', mapdata)
    map1.setOption(this.option3) */
    this.initmap3()
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  height: 240px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
  // margin-right: 15px;
}

.el-card {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.el-card .top {
  height: 32px;
  display: flex;
  justify-content: space-between;
}

.el-card .top .day {
  font-size: 10px;
  color: #1890ff;
  border: 1px solid #d1e9ff;
  border-radius: 3px;
  background-color: #e8f4ff;
  display: block;
  line-height: 26px;
  height: 26px;
  margin: 3px 5px;
  padding: 0 10px;
}

.el-card .content {
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 10px;
}

// 不起作用
.content line {
  margin: 10px 10px;
}

.el-card .bottom {
  height: 32px;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

#chart1 {
  width: 500px;
  height: 300px;
}

#chart2 {
  width: 500px;
  height: 300px;
}

#map1 {
  max: 500px;
  height: 300px;
}

#map3 {
  width: 500px;
  height: 300px;
  background-color: skyblue;
}
.map5 {
  width: 500px;
  height: 300px;
  background-color: skyblue;
}
</style>
